<template>
  <div class="custom-steps">
    <div class="custom-steps-body">
      <template v-if="!disabled||!tabMode">
      <div :style="{ '--steps-width': listData.stepsWidth }" :class="listData.stepsWidth? 'custom-steps-width' : 'auto-steps-width'">
        <el-steps v-if="listData.type==='steps'" :active="activeStep">
          <el-step v-for="(step, index) in listData.data" :key="index">
            <template #title>
              <div class="custom-step-title" :class="{'active-step': index === activeStep}">
                <span class="step-sn">{{ index + 1 }}</span>
                <span class="step-finish"><i class="el-icon-check"></i></span>
                <span class="step-title-text">{{ step.title }}</span>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      </template>
      <el-tabs v-else v-model="activeStepStr">
        <el-tab-pane
          :label="item.title"
          :name="index + ''"
          v-for="(item, index) in listData.data"
          :key="index"
        ></el-tab-pane>
      </el-tabs>
      <div v-if="listData.type==='radioGroup'" style="margin:auto; margin-bottom:30px;text-align:center;">
        <el-radio-group v-model="activeStep">
          <template v-for="(item, index) in listData.data">
            <el-radio-button :label="index" :key="item.title">{{ item.title }}</el-radio-button>
          </template>
        </el-radio-group>
      </div>
      <el-form
        ref="form"
        :inline="true"
        label-position="left"
        :label-width="labelWidth"
        :model="item.formData"
        v-for="(item, index) in listData.data"
        :key="index"
        v-show="index===activeStep"
      >
        <form-item-group
          :form-data="item.formData"
          :label-width="labelWidth"
          ref="formGroup"
          @change="change"
        >
          <template v-for="(curItem, prop) in item.formData" v-slot:[prop]>
            <template v-if="curItem.type === ':slot'">
              <slot :name="prop"></slot>
            </template>
          </template>
        </form-item-group>
      </el-form>
    </div>
    <div class="fake-border" style="width:100%; height: 1px; background: #ccc;position:absolute;left:0"></div>
    <div class="steps-footer">
      <base-btn v-if="editMode!=='detail'" :btnData="btnCancel" @click.native="handleCancel"></base-btn>
      <base-btn v-if="editMode==='detail'" :btnData="btnClose" @click.native="handleCancel"></base-btn>
      <base-btn :btnData="btnPrev" @click.native="activeStep--" v-if="listData.type==='steps' && activeStep > 0"></base-btn>
      <template v-if="listData.type==='steps' && !listData.disableLastStepConfirm">
        <base-btn :btnData="btnNext" @click.native="nextStep" v-if="listData.type==='steps' && activeStep < listData.data.length"></base-btn>
        <base-btn :btnData="btnOk" @click.native="handleSubmit(listData.type)" v-if="listData.type==='steps' && activeStep === listData.data.length && (!editMode || editMode!=='detail')"></base-btn>
      </template>
      <template v-if="listData.type==='steps' && listData.disableLastStepConfirm">
        <base-btn :btnData="btnNext" @click.native="nextStep" v-if="listData.type==='steps' && activeStep < (listData.data.length - 1)"></base-btn>
        <base-btn :btnData="btnOk" @click.native="handleSubmit(listData.type)" v-if="listData.type==='steps' && activeStep === (listData.data.length - 1) && (!editMode || editMode!=='detail')"></base-btn>
      </template>
      <template v-if="listData.type==='radioGroup'">
        <base-btn :btnData="btnOk" @click.native="handleSubmit(listData.type)" v-if="(!editMode || editMode!=='detail')"></base-btn>
      </template>
    </div>
  </div>
</template>

<script>
import FormItemGroup from '@/components/FormItemGroupNew/index';
import DetailAction from '@/views/_mixins/detail-action';
import BaseBtn from "@/components/BaseBtn/index";

/**
 * 用法：
 *
 * parentDialogMode: 非必传，默认edit, detail/edit/add 当值为detail时，不展示确定按钮
 *
 * listData: {
 *   type: 'steps', // type类型为 radioGroup （单选框组按钮）、steps （步骤条）
 *   stepsWidth: '264px', // 可选设置，用于设置步骤条区域的整体宽度。不设置就为自动宽度
 *   disableLastStepConfirm: false, // 可选设置，默认false。当false时，确认提交按钮在步骤长度+1时才出现。当为true时，确认提价按钮在步骤长度时出现（比el-steps提前一步出现确认）
 *   data: [
 *     {
 *       title: '选择',
 *       formData: {
 *         location: { label: '所在地区', value: '', placeholder: '请选择', type: 'select', width:'50%', rightGap: '10px' },
 *         estate: { label: '所在小区', value: '', placeholder: '请选择', type: 'select', width: '50%', leftGap: '10px' },
 *         name: { label: '电梯', required: true, value: '', placeholder: '请输入', type: 'text', width: '50%', rightGap: '10px', rules:[
 *            { type: 'required', message: 'pls type name'},
 *            { type: 'email', message: '请输入正确邮箱地址', when: (formData) => formData.name.value.includes('@')},
 *          ]},
 *         evalDate: { label: '评估日期', value: '', placeholder: '请选择日期', type: 'data-picker', width: '50%', leftGap: '10px' },
 *     }
 *     },
 *     {
 *       title: '编辑配置',
 *       formData: {
 *         overallScore: { label: '综合得分', value: '', placeholder: '请选择', width: '50%', rightGap: '10px' },
 *         overallGrade: { label: '综合等级', value: '', placeholder: '请选择', type: 'select', width: '50%', leftGap: '10px' },
 *         overallEval: { label: '综合评价', value: '', placeholder: '请输入', type: 'textarea' },
 *       }
 *     }
 *   ]
 */

export default {
  name: 'FormStepsGroup',
  mixins: [DetailAction],
  components: {
    FormItemGroup,
    BaseBtn,
  },
  props: {
    listData: {
      type: Object,
      required: true
    },
    parentDialogMode: {
      type: String,
      default: 'edit'
    },
    labelWidth:{
      default:'90px'
    },
    tabMode:{
      type: Boolean,
      default: false
    },
    async:{
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      activeStep: 0,
      fileName: '',
      btnPrev: {
        name: '上一步',
        type: 'prev',
      },
      btnNext: {
        name: '下一步',
        type: 'next',
      },
      btnOk: {
        name: '确定',
        type: 'ok',
      },
      btnCancel: {
        name: '取消',
        type: 'cancel',
        bgColor: '#2B2B2C',
      },
      btnClose: {
        name: '关闭',
        type: 'cancel',
        bgColor: '#2B2B2C',
      },
      editMode: this.parentDialogMode
    };
  },
  computed: {
    activeStepStr: {
      get() {
        return this.activeStep + '';
      },
      set(v) {
        this.activeStep = +v;
      }
    }},
  created() {},
  methods: {
    resetStep(){
      this.activeStep =0
    },
    change(value, row = {}, prop = null) {
      if (prop) {
        this.$emit("change", {
          value: value,
          prop: prop,
        });
      } else {
        this.$emit("change", value);
      }

      if (row && row.customChange) {
        row.customChange(this, value);
      }
    },
    nextStep() {
      if (this.$refs.formGroup[this.activeStep].checkValue()) {
      if(this.async){
          this.$emit('nextStep',this.activeStep)
      }else{
          this.activeStep++;
      }

      }
    },
    handleCancel() {
      this.$emit('cancel')
    },
    handleSubmit(type) {
      if(!this.$refs.formGroup[this.activeStep].checkValue()){
        return false
      }
      if (type === 'steps') {
        let result = {}
        for (let index = 0; index < this.listData.data.length; index++) {
        const  value = this.$refs.formGroup[index].checkValue()
          result ={...result,...value}
        }
        this.$emit('submit',result)
      } else {
        this.$refs.formGroup[this.activeStep].checkValue()
      }
    },
    getFormGroup(){
      return this.$refs.formGroup[0]
    }
  },
};
</script>

<style lang="scss" scoped>
.custom-steps {
  ::v-deep .el-step__icon {
    display: none;
  }

  ::v-deep .el-step.is-horizontal {
    display: flex;
    flex-direction: row-reverse;
  }

  ::v-deep .el-step__main {
    white-space: nowrap;
  }

  .step-sn, .step-finish {
    display: inline-flex;
    background: #EBEDF0;
    color: #000;
    width: 28px;
    height: 28px;
    font-size: 16px;
    border-radius: 14px;
    justify-content: center;
    align-items: center;
    font-weight: 300;
    margin-right: 6px;
  }

  .step-title-text {
    font-size: 16px;
    color: #303133;
    font-weight: 300;
  }

  .active-step {
    .step-sn {
      background: #0D48CE;
      color: #fff;
    }
  }

  .el-step__title.is-finish {
    .step-sn {
      display:none;
    }

    .step-finish {
      background: #E8F3FF;
      color: #0D48CE;
    }
  }

  .el-step__title.is-process, .el-step__title.is-wait {
    .step-finish {
      display:none;
    }
  }

  ::v-deep .el-step__head.is-process, ::v-deep .el-step__head.is-finish, ::v-deep .el-step__head.is-wait {
    justify-content: center;
    align-items: center;
    display: flex;
    top: 6px;
  }

  ::v-deep .el-step.is-horizontal .el-step__line {
    margin:0 10px !important;
    height: 1px;
    overflow:hidden;
    background-color: #D8D8D8;
  }

  .steps-footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .auto-steps-width {
    margin: 0 100px 40px 100px;
  }

  .custom-steps-width {
    margin: auto;
    margin-bottom: 40px;
    width: var(--steps-width);
  }

  .custom-steps-body {
    max-height: 60vh;
    overflow: auto;
    padding: 0 25px;

    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 8px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }

    &::-webkit-scrollbar-track-piece {
      background: rgba(200, 200, 200, 0.1);
    }

    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 8px;
      background: rgba(200, 200, 200, 0.5);
    }
  }
}
</style>
